<template>
  <div class="home-purchase">
    <!-- 采购需求列表组件，通过 cneeds 传递需求数据，监听 handleSearch 事件 -->
    <purchase :cneeds="needs" @handleSearch="handleSearch"></purchase>
    <!-- 分页组件，配置了分页相关参数和事件监听 -->
    <pagination
        @item-click="pageClick"
        :cUrl="url"
        :cTotal="total"
        :cPageSize="pageSize"></pagination>
  </div>
</template>

<script>
import {selectNeedsPage} from "@/api/order";
import Purchase from "../../../components/user/UserPurchase.vue";
import Pagination from "../../../components/Pagination.vue";

export default {
  data() {
    return {
      // 存储采购需求列表数据
      needs: [],
      // 总记录数，用于分页计算
      total: 0,
      // 每页显示的记录数
      pageSize: 30,
      // 搜索关键词，用于筛选需求
      searchValue: "",
      // 接口URL，分页组件使用
      url: "/order/needs/",
      // 当前页码，优先从sessionStorage获取上次浏览记录，默认第1页
      needsCount: sessionStorage.getItem("/order/needs/pageCode")
          ? sessionStorage.getItem("/order/needs/pageCode")
          : 1,
    };
  },
  created() {
    // 更新侧边栏激活状态
    this.$store.commit("updateActiveIndex", "3");
    // 初始化加载数据
    this.getData();
  },
  methods: {
    // 获取采购需求数据
    getData() {
      selectNeedsPage({
        pageNum: this.needsCount,
        keys: this.searchValue
      }).then((res) => {
        if (res.flag === true) {
          // 更新需求列表和总记录数
          this.needs = res.data.list;
          this.total = res.data.total;
        }
      });
    },
    // 分页点击事件处理
    pageClick(item) {
      this.needs = item;
    },
    // 搜索事件处理
    handleSearch(val) {
      // 更新搜索关键词并重新加载数据
      this.searchValue = val;
      this.getData();
    }
  },
  components: {
    Purchase,
    Pagination,
  },
};
</script>

<style lang="less" scoped>
.home-purchase {
  width: 1500px;
  margin: 0 auto;
}
</style>